<template>
  <ZZDialog class="form-context" title="图层配置" ref="mySelf">
    <el-form :model="form" label-width="80px" class="main-form">
      <el-form-item label="URL">
        <el-input v-model="form.url" @blur="onUrlChanged" />
      </el-form-item>
      <el-form-item label="图层名称">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="投影类型">
        <el-radio-group v-model="form.zprj.way">
          <el-radio label="manual">手动</el-radio>
          <el-radio label="auto">自动</el-radio>
          <el-radio label="globe">球心</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="基准点">
        <el-row v-show="form.zprj.way != 'globe'">
          <el-col :span="3" class="text-right">
            <span class="text-gray-500">x</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="form.zprj.x" />
          </el-col>
          <el-col :span="3" class="text-right">
            <span class="text-gray-500">y</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="form.zprj.y" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-show="form.zprj.way != 'auto'">
        <el-row>
          <el-col :span="3" class="text-right">
            <span class="text-gray-500">经度</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="form.zprj.longitudeDegree" />
          </el-col>
          <el-col :span="3" class="text-right">
            <span class="text-gray-500">纬度</span>
          </el-col>
          <el-col :span="9">
            <el-input v-model="form.zprj.latitudeDegree" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item v-show="form.zprj.way == 'auto'">
        <el-row>
          <el-col :span="6" class="text-right">
            <span class="text-gray-500">epsgId</span>
          </el-col>
          <el-col :span="18">
            <el-input-number controls-position="right" v-model="form.zprj.epsgId" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="平移">
        <el-row>
          <el-col :span="1" class="text-right">
            <span class="text-gray-500">x</span>
          </el-col>
          <el-col :span="7">
            <el-input-number controls-position="right" v-model="form.zprj.translate.x" />
          </el-col>
          <el-col :span="1" class="text-right">
            <span class="text-gray-500">y</span>
          </el-col>
          <el-col :span="7">
            <el-input-number controls-position="right" v-model="form.zprj.translate.y" />
          </el-col>
          <el-col :span="1" class="text-right">
            <span class="text-gray-500">z</span>
          </el-col>
          <el-col :span="7">
            <el-input-number controls-position="right" v-model="form.zprj.translate.z" />
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="旋转(度)">
        <el-input-number v-model="form.zprj.rotate.z" controls-position="right" />
      </el-form-item>

      <el-form-item label="屏幕容差">
        <el-input-number :min="1" :max="2560" controls-position="right" v-model="form.maximumScreenSpaceError" />
      </el-form-item>
      <el-form-item v-if="props.layerId == undefined">
        <el-button type="primary" @click="onAdd">创建</el-button>
      </el-form-item>
    </el-form>
  </ZZDialog>
</template>

<script lang="ts" setup>
import ZZDialog from '@/common/ZZDialog.vue';
import { onMounted, reactive, toRaw, watch, ref } from 'vue';
import { GuessZprj } from './GuessZprj';
import { useViewer } from '@/stores/viewer';
import EventBus from '@/common/EventBus';

const props = defineProps<{
  layerId?: string | number;
}>();

const emits = defineEmits(['ok']);
const viewer: any = useViewer().viewer;
const mySelf = ref(null);
const form = reactive({
  type: '3dtiles',
  url: './sampleBuilding/jz_9_root.json',
  name: '',
  zprj: {
    way: 'auto',
    x: 0.0,
    y: 0.0,
    longitudeDegree: 112.388212,
    latitudeDegree: 34.619557,
    epsgId: 4546,
    translate: {
      x: 0.0,
      y: 0.0,
      z: 0.0
    },
    rotate: {
      z: 0.0
    }
  },
  visible: true,
  maximumScreenSpaceError: 16
});

function getZprj() {
  const src = form.zprj;
  return {
    way: src.way,
    x: Number(src.x),
    y: Number(src.y),
    longitudeDegree: Number(src.longitudeDegree),
    latitudeDegree: Number(src.latitudeDegree),
    epsgId: Number(src.epsgId),
    translate: {
      x: Number(src.translate.x),
      y: Number(src.translate.y),
      z: Number(src.translate.z)
    },
    rotate: {
      z: Number((src.rotate.z / 180.0) * Math.PI)
    }
  };
}

function updateTileset() {
  const layer = viewer.zz.getLayer(props.layerId, 'id');
  const tileset = layer.model;
  layer.setZprj(getZprj());
  tileset.maximumScreenSpaceError = Number(form.maximumScreenSpaceError);
}

onMounted(() => {
  if (props.layerId) {
    const layer = viewer.zz.getLayer(props.layerId, 'id');
    const tileset = layer.model;
    const config = layer.config;
    form.url = config.url;
    form.name = config.name;
    form.maximumScreenSpaceError = config.maximumScreenSpaceError || tileset.maximumScreenSpaceError;

    if (config.zprj) {
      const src = config.zprj;
      const dec = form.zprj;
      dec.way = src.way || dec.way;
      dec.x = src.x || dec.x;
      dec.y = src.y || dec.y;
      dec.epsgId = src.epsgId || dec.epsgId;
      dec.longitudeDegree = src.longitudeDegree || src.longitude || dec.longitudeDegree;
      dec.latitudeDegree = src.latitudeDegree || src.latitude || dec.latitudeDegree;
      dec.translate.x = src?.translate?.x || dec.translate.x;
      dec.translate.y = src?.translate?.y || dec.translate.y;
      dec.translate.z = src?.translate?.z || dec.translate.z;
      dec.rotate.z = (src?.rotate?.z * Math.PI) / 180.0 || dec.rotate.z;
    }

    watch(form, updateTileset, { deep: true });
  } else {
    onUrlChanged();
  }
});

function onAdd() {
  const config = Object.assign({}, toRaw(form));
  const layer = zz3d.layer.createLayer(config, viewer);
  //绑定到图层管理中
  viewer.zz.addOperationalLayer(layer);
  EventBus.emit('sceneLoaded', {});
  emits('ok', {});
}

async function onUrlChanged() {
  if (form.url.length == 0) {
    return;
  }

  const obj = await GuessZprj(form.url);
  Object.assign(form.zprj, obj);
}
</script>

<style scoped>
.text-right {
  text-align: right;
  padding-right: 5px;
  width: 26px;
}
.form-context {
  position: absolute;
  left: 200px;
  top: 200px;
}
.main-form {
  margin-top: 10px;
  margin-bottom: 16px;
}
</style>
